<template>
	<view class="content1">
		<navbar title="商品详情" @goBack="goBack"></navbar>
		<view class="padd24">
			<view class="addressbg" @click="goaddress">
				<image class="l_img" src="../../static/owo/position.png"></image>
				<view class="address_r">
					<view class="address_t_c" v-if="address.id">
						<text class="address_t_c_t">{{address.username}} {{address.phone}} </text>
						<text
							class="address_t_c_b">{{ address.province==address.city ?address.province: address.province + address.city }}{{address.region}}{{address.address}}</text>
					</view>
					<text class="address_t_c_b" style="color: #ffffff;font-size: 32rpx;" v-else>请选择收货地址</text>
					<image class="arrow_right" src="../../static/icons/z-meta/arrow-right.png"></image>
				</view>
			</view>
			<view class="a_content" v-if='subtype==1'>
				<view class="contetn_goods">
					<image class="goodsimg" :src="detail.main_photo"></image>
					<view class="goods_r">
						<text class="goods_r_white">{{detail.name}}</text>
						<text class="goods_r_num">x{{num}}</text>
					</view>
				</view>
				<view class="peisong">
					<text class="p_title">消耗z元素</text>
					<text class="p_label">{{detail.price*num}}</text>
				</view>
			</view>
			<view class="gift-box" v-else>
				<view class="gift-item" v-for="(item, index) in sendlist" :key="index">
					<van-image width="180rpx" height="180rpx" :src="item.image" />
					<text class="white-content title">{{ item.name }}</text>
					<view style="width: 160rpx;margin: 10rpx 0;" class="white-content">
						<text>
							x{{item.count}}
						</text>

					</view>
				</view>
			</view>
			<view class="peisong" style="padding: 24rpx 30rpx;">
				<text class="p_title">配送方式</text>
				<text class="p_label" style="font-size: 28rpx;">满5件包邮，不满5件邮费10元</text>
			</view>
			<view class="peisong" style="padding: 24rpx 30rpx;">
				<text class="p_title">邮费余额</text>
				<text class="p_label" style="font-size: 28rpx;">{{ (wallet.postage/100).toFixed(2) }}元</text>
			</view>
			<view class="fixbg">
				<view class="fixtop" v-if="subtype==1">
					<text class="fixtitle">合计：</text>
					<text class="fixr_num">{{detail.price*num}} <text>Z元素</text></text>
				</view>
				<view class="fixtop" v-else>
					<text class="fixtitle">合计：</text>
					<text class="fixr_num">数量：{{allnum.count}} 金额 {{allnum.price}} <text></text></text>
				</view>
				<view class="paybtn" @click="createdorder" v-if="subtype==1">
					立即支付{{detail.price*num}}Z元素
				</view>
				<view class="paybtn1" @click="checknum" v-else>
					<image style="width: 100%;height: 84rpx;" src="/static/owo/address-confirm-btn1.png"></image>
				</view>
			</view>
		</view>
		<van-dialog use-slot :show="payMethodDialogVisible" :show-confirm-button="false" width="312">
			<alipay v-if="payMethodDialogVisible" v-on:close="payMethodDialogVisible = false"
				@orderstate="startGetOrderState" @getono="getono" v-on:confirm="paymethod" />
		</van-dialog>
	</view>
</template>

<script>
	import {
		buyzproduct,
		lzproductDetail
	} from "@/api/z_meta"
	import {
		loadWallet
	} from '@/api/user'
	import alipay from './alipay'
	import {
		packagedeliver
	} from "@/api/package"
	import {
		addresslist
	} from "@/api/user";
	import {
		orderstate
	} from "@/api/pay";
	import navbar from '@/wxcomponents/navbar'
	export default {
		name: "mall-detail",
		components: {
			alipay,
			navbar
		},
		data() {
			return {
				payMethodDialogVisible: false,
				// 邮费轮询器
				timer: null,

				ono: "",
				show: false,
				detail: {
					price: 0
				},
				num: 1,
				address: {
					"province": "",
					"city": "",
					"region": "",
					"address": "",
					"username": "",
					"phone": ""
				},
				id: null,
				subtype: 1, //1兑换商品 2 发货
				sendlist: [],

				// 钱包
				wallet: {}
			}
		},
		computed: {
			allnum() {
				let count = 0,
					price = 0
				if (this.sendlist.length > 0) {
					this.sendlist.map((item, index) => {
						count += item.count
						price += parseInt(item.count) * parseInt(item.price)
					})
				}
				return {
					"count": count,
					"price": price
				}
			},
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		onLoad(option) {
			if (option.type) {
				this.subtype = option.type
				this.sendlist = uni.getStorageSync("sendlist")
				uni.removeStorageSync("sendlist")
			}
			if (option.id) {
				this.id = parseInt(option.id)
				this.num = parseInt(option.num)
				this.getlzproductDetail()
			}
			uni.$off('addressselect')
			uni.$on('addressselect', (res) => {
				console.log(res)
				this.address = res
			})
			this.getaddresslist()
			this.loadWallet()
		},
		methods: {
			getaddresslist() {
				var obj = {
					page: 1,
					size: 20,
				};
				addresslist(obj).then((res) => {
					if (res.data.items.length > 0) {
						this.address = res.data.items[0];
					}
				});
			},
			async loadWallet() {
				const res = await loadWallet()
				const data = res.data || {}
				this.wallet = data
			},
			goaddress() {
				uni.navigateTo({
					url: "/pages/subPackage/address/index?type=1"
				})
			},
			getlzproductDetail() {
				lzproductDetail({
					id: this.id
				}).then(res => {
					console.log(res)
					this.detail = res.data
					this.detail.price = parseInt(this.detail.price)
				})
			},
			createdorder() {
				if (!this.address.id) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					})
					return
				}
				if (this.subtype == 1) {
					var obj = {
						id: this.id,
						address: this.address,
						count: this.num,
					}
					uni.showLoading()
					buyzproduct(obj).then(res => {
						if (res.code == 0) {
							uni.redirectTo({
								url: `/pages/subPackage/paysuccess?id=${res.data.id}`
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
						uni.hideLoading()
					})
				} else {
					this.sendorder()
				}
			},
			getono(onos) {
				this.ono = onos
			},
			async startGetOrderState() {
				const that = this
				const poll = async () => {
					const obj = {
						ono: that.ono
					}
					const res = await orderstate(obj)
					const data = res.data || {}
					if (data.state === 3) {
						clearInterval(that.timer)

						// 程序获取钱包
						that.sendorder(data.ono)
						that.payMethodDialogVisible = false
					}
				}

				this.timer = setInterval(poll, 500);
			},
			checknum() {
				let count = 0
				this.sendlist.map((item, index) => {
					count += item.count
				})
				if (count < 5) {
					// 有邮费余额，则直接发货
					if (this.wallet.postage >= 1000) {
						this.sendorder()
					} else {
						this.payMethodDialogVisible = true
					}
					return
				}
				this.sendorder()
			},
			sendorder() {
				if (!this.address.id) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					})
					return
				}
				let list = []
				this.sendlist.map((item, index) => {
					list.push({
						id: item.id,
						count: item.count,
					})
				})
				var obj = {
					items: list,
					address: this.address,
					carriage_unit: "score", //balance
					ono: this.ono || ""
				}
				uni.showLoading()
				packagedeliver(obj).then(res => {
					if (res.code == 0) {
						uni.redirectTo({
							url: `/pages/subPackage/paysuccess?type=2`
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					uni.hideLoading()
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	@import 'src/static/scss/common';

	// page {
	// 	background-color: #0A050B;
	// }

	.padd24 {
		padding: 0 24rpx;
		box-sizing: border-box;
		width: 100%;

	}

	.addressbg {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		background-color: #1f1f1f;
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 4rpx;
	}

	.l_img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.address_r {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.address_t_c {
		display: flex;
		flex-direction: column;
		color: #ffffff;
	}

	.address_t_c_t {
		margin-bottom: 16rpx;
	}

	.arrow_right {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.peisong {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		background-color: #1f1f1f;
		border-radius: 4rpx;
		color: #ffffff;
	}

	.p_title {
		color: #a1a1aa;
	}

	.a_content {
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #1f1f1f;
		border-radius: 4rpx;
		color: #ffffff;
		margin-bottom: 30rpx;
	}

	.contetn_goods {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.goodsimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}

	.goods_r {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
	}

	.goods_r_num {
		color: #a1a1aa;
		margin-top: 30rpx;
	}



	.fixbg {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: 25rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
		padding: 0 24rpx 25rpx 25rpx;
	}

	.fixtop {
		width: 100%;
		display: flex;
		padding: 24rpx 30rpx;
		justify-content: space-between;
		background-color: #1f1f1f;
		align-items: center;
		color: #ffffff;
		font-size: 24rpx;
		box-sizing: border-box;
		border-radius: 40rpx;
		margin-bottom: 20rpx;
	}

	.fixtitle {}

	.paybtn1 {
		font-size: 32rpx;
		width: 702rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
	}

	.paybtn {
		font-size: 32rpx;
		width: 702rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: url("../../static/icons/z-meta/bigbtn.png");
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 100%;
		color: #ffffff;
		text-align: center;
	}

	.gift-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.gift-item {
			margin: 10rpx 0 10rpx 30rpx;

			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.title {
		width: 160rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>